<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="js/echarts.min.js"></script>
    <script>
        // 初始化实例对象  echarts.init(dom容器);
        var myChart = echarts.init(document.querySelector(".box"));
        // 指定配置项和数据
        var option = {
            // color设置我们线条的颜色 注意后面是个数组
            color: ["pink", "red", "green", "skyblue"],
            // 设置图表的标题
            title: {
                text: "折线图堆叠123"
            },

            // 图表的提示框组件
            tooltip: {
                // 触发方式
                trigger: "axis"
            },

            // 图例组件
            legend: {
                // series里面有了 name值则 legend里面的data可以删掉
            },
            // 网格配置  grid可以控制线形图 柱状图 图表大小
            grid: {
                // 距离dom容器的距离
                left: "3%",
                right: "4%",
                bottom: "3%",

                // 是否显示刻度标签 如果是true 就显示 否则反之
                containLabel: true
            },
            // 工具箱组件  可以另存为图片等功能
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            // 设置x轴的相关配置
            xAxis: {
                type: "category",
                // 是否让我们的线条和坐标轴有缝隙
                boundaryGap: false,
                data: ["星期一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            // 设置y轴的相关配置
            yAxis: {
                type: "value"
            },
            // 系列图表配置 它决定着显示那种类型的图表
            series: [
                {
                    name: "邮件营销",
                    type: "line",

                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: "联盟广告",
                    type: "line",
                    //stack 会造成数据堆叠，将相同stack参数的数量在下一次进行堆叠到一起
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: "视频广告",
                    type: "line",

                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: "直接访问",
                    type: "line",
                    // stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
            ]
        };

        // 把配置项给实例对象
        myChart.setOption(option);
    </script>
</body>

</html>